<template>
  <div id="myfavorites">
    <!-- 使用van-list -->
    <van-list v-model="loading"
              :finished="finished"
              @load="listRoll"
              :offset="offset"
              :immediate-check="isCheck">
      <div class="linebox"
           v-for="(item,index) in listData"
           :key="index"
           @click="gotoDetail(item)">
        <van-swipe-cell :right-width="80"
                        :left-width="0">
          <img class="collectionImg"
               :src="item.head_img"
               alt="">
          <div class="collectionTxt">
            <p>{{item.title}}</p>
            <p class="price">￥{{item.price}}</p>
          </div>
          <span v-show="lang=='zh'"
                slot="right"
                class="del"
                @click="cancelFa(item.goods_id)">删除</span>
          <span v-show="lang=='en'"
                slot="right"
                class="del"
                @click="cancelFa(item.goods_id)">delete</span>
        </van-swipe-cell>
      </div>
    </van-list>
    <div class="nolist"
         v-show="lang=='zh'"
         v-if="finished && dataLength !=0 ">没有更多数据</div>
    <div class="nolist"
         v-show="lang=='en'"
         v-if="finished && dataLength !=0 ">no more data</div>

    <div class="nolist"
         v-show="lang=='zh'"
         v-if="dataLength==0">暂无收藏，去逛逛吧！</div>
    <div class="nolist"
         v-show="lang=='en'"
         v-if="dataLength==0">No collection, go for a stroll</div>
  </div>
</template>
<script>
import { Toast, List, Loading, SwipeCell, Dialog } from 'vant';
import { getfavoriteList, postCancelFa } from '@/api/my/collection';
export default {
  name: 'myfavorites',
  //声明组件
  components: {
    [Loading.name]: Loading,
    [Toast.name]: Toast,
    [List.name]: List,
    [SwipeCell.name]: SwipeCell,
    [Dialog.name]: Dialog,
  },
  data () {
    return {
      lang: 'zh',
      pageIndex: 1,//分页页数
      pageSize: 10,//分页条数
      userId: 0,//用户ID       
      offset: 50,
      loading: false,//是否正在加载
      finished: false,//是否加载完整
      isCheck: false,//是否一开始检查滚动
      dataLength: 0,//数据listData长度
      listData: [],  //列表数据
    }
  },
  //实例创建完成后被立即调用
  created () {
    //获取用户ID
    this.getUserId();
    //获取语言环境
    this.getLang();
    //获取列表
    this.getmyfavoriteList();
  },
  //监听
  watch: {

  },
  //计算属性
  computed: {

  },
  //
  methods: {
    //获取用户ID
    getUserId () {
      if (this.$route.query.userId && this.$route.query.userId > 0) {
        this.userId = this.$route.query.userId;
      } else {
        //获取缓存内的用户ID
        this.userId = window.localStorage.getItem("userId");
      }
    },
    //获取语言环境
    getLang () {
      if (this.$route.query.lang) {
        this.lang = this.$route.query.lang;
      }
    },
    //滚动加载数据
    listRoll () {
      let _this = this;
      _this.pageIndex++;
      _this.getmyfavoriteList();
    },
    //获取收藏列表
    getmyfavoriteList () {
      let that = this;
      getfavoriteList(this.userId, this.pageIndex, this.pageSize, this.lang).then(res => {
        if (res.code == 200) {
          if (res.data.total > 0) {
            var list = res.data.list;
            that.listData = that.listData.concat(list);
            that.loading = false;
          } else {
            that.finished = true;
            that.loading = false;
          }
          if (this.pageIndex == 1 && res.data.total < this.pageSize) {
            this.finished = true;
            this.loading = false;
          } else if (res.data.total == this.listData.length) {
            this.finished = true;
            this.loading = false;
          }
          console.log(this.listData)
          that.dataLength = that.listData.length;
        } else {
          Toast(res.msg)
        }
      });

    },
    //跳转到详情
    gotoDetail (item) {
      // console.log(item);
      let id = item.goods_id;//藏品id
      var para = {};
      para.lang = this.lang;
      if (this.lang == 'zh') {
        para.title = "藏品详情";
      } else {
        para.title = "collection details";
      }
      para.id = id;//藏品详情id (返回首页 此参数没有)
      para.linkType = "goodsDetail";
      this.interaction.hLinkToApp(para);
    },
    //取消收藏
    cancelFa (goodsId) {
      var message = '';
      var confirm = '确认';
      var cancel = '删除';
      if (this.lang == 'zh') {
        message = '是否永久删除该藏品？';
      } else {
        message = 'Permanently delete the collection?';
        confirm = 'confirm';
        cancel = 'cancel'
      }
      Dialog.confirm({
        title: '',
        message: message,
        confirmButtonText: confirm,
        cancelButtonText: cancel
      }).then(() => {
        // on confirm
        postCancelFa(this.userId, goodsId, this.lang).then(res => {
          if (res.code == 200) {
            this.listData = [];
            this.getmyfavoriteList();
          } else {
            Toast(res.msg)
          }
        });
      }).catch(() => {
        // on cancel
      });
    }
  }

}
</script>

<style lang="stylus" scoped>
* {
  box-sizing: border-box;
}

.nolist {
  width: 100%;
  height: auto;
  padding: 0.266667rem;
  text-align: center;
  font-family: PingFangSC-Regular;
  font-size: 0.373333rem;
  color: #a2a2a2;
  letter-spacing: 0.008rem;
}

.linebox {
  width: 100%;
  height: 2.666667rem;
  line-height: 2.666667rem;
  border-bottom: 0.026667rem solid #f1f1f1;
  background-color: #ffffff;
  padding: 0.266667rem;
  position: relative;

  .flowstate {
    position: absolute;
    z-index: 999999;
    left: 0;
    top: 0;
    width: 1.28rem;
    height: 0.72rem;
  }

  .collectionImg {
    width: 23%;
    height: 2.133333rem;
    display: inline-block;
    float: left;
  }

  .collectionTxt {
    width: 73%;
    height: 2.133333rem;
    margin-left: 0.32rem;
    float: left;

    p {
      width: 100%;
      height: 1.066667rem;
      font-family: PingFangSC-Regular;
      font-size: 0.373333rem;
      color: #494949;
      letter-spacing: 0.008rem;
      line-height: 0.533333rem;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .price {
      margin-top: 0.586667rem;
      font-family: PingFangSC-Medium;
      font-size: 0.346667rem;
      color: #cb9c57;
      letter-spacing: 0;
      text-align: left;
    }
  }

  .edit {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 0.266667rem;
    margin-top: 0.533333rem;
    width: 1.733333rem;
    height: 1.066667rem;
    line-height: 1.066667rem;
    text-align: center;
    font-size: 0.4rem;
  }

  .del {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 0.266667rem;
    margin-top: 0.533333rem;
    width: 1.733333rem;
    height: 1.066667rem;
    line-height: 1.066667rem;
    text-align: center;
    font-size: 0.4rem;
    color: #fff;
    background-color: red;
  }
}
</style>


